<template>
  <div class="app-container">
    <div class="match-width">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="allList"
        element-loading-text="Loading"
        @cell-click="onCellClick"
        @selection-change="handleSelectionChange"
        @row-click="onItemClick"
        @row-dblclick="onItemDoubleClick"
        :max-height="autoHeight"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="项目名称" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.project.name }}
          </template>
        </el-table-column>
        <el-table-column label="省份" align="center" width="">
          <template slot-scope="scope">
            {{ scope.row.project.province }}
          </template>
        </el-table-column>
        <el-table-column label="城市" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.project.city }}
          </template>
        </el-table-column>
        <el-table-column label="招标方式" width="" align="">
          <template slot-scope="scope">
            {{ scope.row.biddingMode }}
          </template>
        </el-table-column>
        <el-table-column label="铜不含税基价" width="60" align="center">
          <template slot-scope="scope">
            {{ scope.row.tongBhsjj }}
          </template>
        </el-table-column>
        <el-table-column label="铝不含税基价" width="" align="center">
          <template slot-scope="scope">
            {{ scope.row.lvBhsjj }}
          </template>
        </el-table-column>
        <el-table-column label="税率" width="" align="center">
          <template slot-scope="scope">
            {{scope.row.gdyBasic && scope.row.gdyBasic.pdShuiLv != null ? scope.row.gdyBasic.pdShuiLv + "%" : ""}}
          </template>
        </el-table-column>
        <el-table-column label="外线做法" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails!=null">{{ scope.row.demandDetails.wxzfName }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="外线电缆材质" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails!=null">{{ scope.row.demandDetails.wxdlczName }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="外线总单价(元/m)" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.wxzdj }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="内线电缆材质" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.nxdlcz }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="总装机容量(kva)" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.zzjrl }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
<!--        <el-table-column label="单方负荷(W/㎡)" width="100" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.dffh }}</span>-->
<!--            <span v-else></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--        <el-table-column label="充电桩实施比例" width="100" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.cdzssbl }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="充电桩容量比例" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">
<!--              {{ scope.row.demandDetails.cdzrlylbl }}-->
              {{scope.row.demandDetails.cdzrlylbl?(scope.row.demandDetails.cdzrlylbl*100)+"%":"/"}}
            </span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="充电桩实配比例" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">
<!--              {{ scope.row.demandDetails.cdzdbxssbl }}-->
               {{scope.row.demandDetails.cdzdbxssbl?(scope.row.demandDetails.cdzdbxssbl*100)+"%":"/"}}
            </span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="充电桩实配深度" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.cdzpjsdName }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="内线总建面单方(元/㎡)" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.nxzjmdf }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="内线负荷单方(元/kva)" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.nxfhdf }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="数据状态" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.demandDetails">{{ scope.row.demandDetails.jieDuanName }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200" align="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.remarks }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="操作" align="center" width="">
          <template slot-scope="scope">
            <div class="hor ver-center">
              <el-button type="info" class="" size="mini" v-has-permission="['首页编辑']"
                         @click.stop="onClickView(scope.row)">编辑
              </el-button>
<!--              <el-button type="danger" class="" size="mini" :loading="onDeleteLoading"-->
<!--                         @click.stop="onDeleteId=scope.row.id; onDeleteShow = true ">删除-->
<!--              </el-button>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="hor">
        <div class="flex1"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mg-t-10">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        title="编辑用需信息"
        :visible.sync="infoDialogShow"
        :close-on-click-modal=false
        width="700px"
        center>
        <div class="ver match-width">
          <div class="ver">
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">项目名称</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128" :disabled="true"
                        v-model="basisDemand.project.name">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">省份</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128" :disabled="true"
                        v-model="basisDemand.project.province">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">城市</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128" :disabled="true"
                        v-model="basisDemand.project.city">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">招标方式</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                        v-model="basisDemand.biddingMode">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">铜不含税基价</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="basisDemand.tongBhsjj">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">铝不含税基价</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="basisDemand.lvBhsjj">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">外线做法</div>
              <el-select class="flex1 font-text-color-main-title" v-model="basisDemand.demandDetails.wxzf"
                         style="width: 225px" clearable placeholder="请选择">
                <el-option
                  label="架空线（单电源）"
                  :value="1">
                </el-option>
                <el-option
                  label="架空线（双电源）"
                  :value="2">
                </el-option>
                <el-option
                  label="架空线（多电源）"
                  :value="3">
                </el-option>
                <el-option
                  label="电缆埋地+架空线（单电源）"
                  :value="4">
                </el-option>
                <el-option
                  label="电缆埋地+架空线（双电源）"
                  :value="5">
                </el-option>
                <el-option
                  label="电缆埋地+架空线（多电源）"
                  :value="6">
                </el-option>
                <el-option
                  label="电缆埋地（单电源）"
                  :value="7">
                </el-option>
                <el-option
                  label="电缆埋地（双电源）"
                  :value="8">
                </el-option>
                <el-option
                  label="电缆埋地（多电源）"
                  :value="9">
                </el-option>
              </el-select>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">外线总单价(元/m)</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number" :disabled="true"
                        v-model="basisDemand.demandDetails.wxzdj">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">内线电缆材质</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px"
                        v-model="basisDemand.demandDetails.nxdlcz">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">总装机容量(kva)</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="basisDemand.demandDetails.zzjrl">
              </el-input>
            </div>
            <!--            <div class="hor ver-center mg-t-20">-->
            <!--              <div style="width: 80px;" class="font14 font-text-color-main-title">单方负荷(W/㎡)</div>-->
            <!--              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"-->
            <!--                        v-model="basisDemand.demandDetails.dffh">-->
            <!--              </el-input>-->
            <!--              <div class="mg-lr-20"></div>-->
            <!--              <div style="width: 80px;" class="font14 font-text-color-main-title">充电桩实施比例</div>-->
            <!--              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"-->
            <!--                        v-model="basisDemand.demandDetails.cdzssbl">-->
            <!--              </el-input>-->
            <!--            </div>-->
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">充电桩容量比例</div>
              <el-select class="flex1 font-text-color-main-title" v-model="basisDemand.demandDetails.cdzrlylbl"
                         style="width: 225px" clearable placeholder="请选择">
                <el-option
                  label="0"
                  :value="0">
                </el-option>
                <el-option
                  label="10%"
                  :value="0.1">
                </el-option>
                <el-option
                  label="20%"
                  :value="0.2">
                </el-option>
                <el-option
                  label="30%"
                  :value="0.3">
                </el-option>
                <el-option
                  label="40%"
                  :value="0.4">
                </el-option>
                <el-option
                  label="50%"
                  :value="0.5">
                </el-option>
                <el-option
                  label="60%"
                  :value="0.6">
                </el-option>
                <el-option
                  label="70%"
                  :value="0.7">
                </el-option>
                <el-option
                  label="80%"
                  :value="0.8">
                </el-option>
                <el-option
                  label="90%"
                  :value="0.9">
                </el-option>
                <el-option
                  label="100%"
                  :value="1">
                </el-option>
              </el-select>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">充电桩实配比例</div>
              <el-select class="flex1 font-text-color-main-title" v-model="basisDemand.demandDetails.cdzdbxssbl"
                         style="width: 225px" clearable placeholder="请选择">
                <el-option
                  label="0"
                  :value="0">
                </el-option>
                <el-option
                  label="10%"
                  :value="0.1">
                </el-option>
                <el-option
                  label="20%"
                  :value="0.2">
                </el-option>
                <el-option
                  label="30%"
                  :value="0.3">
                </el-option>
                <el-option
                  label="40%"
                  :value="0.4">
                </el-option>
                <el-option
                  label="50%"
                  :value="0.5">
                </el-option>
                <el-option
                  label="60%"
                  :value="0.6">
                </el-option>
                <el-option
                  label="70%"
                  :value="0.7">
                </el-option>
                <el-option
                  label="80%"
                  :value="0.8">
                </el-option>
                <el-option
                  label="90%"
                  :value="0.9">
                </el-option>
                <el-option
                  label="100%"
                  :value="1">
                </el-option>
              </el-select>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">充电桩实配深度</div>
              <el-select class="flex1 font-text-color-main-title" v-model="basisDemand.demandDetails.cdzpjsd"
                         style="width: 225px" clearable placeholder="请选择">
                <el-option
                  label="仅变压器预留容量"
                  :value="1">
                </el-option>
                <el-option
                  label="仅变压器预留容量"
                  :value="2">
                </el-option>
                <el-option
                  label="仅低压柜预留容量"
                  :value="3">
                </el-option>
                <el-option
                  label="充电桩配电总箱"
                  :value="4">
                </el-option>
                <el-option
                  label="充电桩电表箱(不挂表)"
                  :value="5">
                </el-option>
                <el-option
                  label="充电桩电表箱(挂表)"
                  :value="6">
                </el-option>
              </el-select>

              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">内线总建面单方(元/㎡)</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number" :disabled="true"
                        v-model="basisDemand.demandDetails.nxzjmdf">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">内线负荷单方(元/kva)</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number" :disabled="true"
                        v-model="basisDemand.demandDetails.nxfhdf" placeholder="请输入"/>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">外线电缆材质</div>
              <el-select class="flex1 font-text-color-main-title" v-model="basisDemand.demandDetails.wxdlcz"
                         style="width: 225px" clearable placeholder="请选择">
                <el-option
                  label="铜芯电缆"
                  :value="1">
                </el-option>
                <el-option
                  label="铝芯电缆"
                  :value="2">
                </el-option>
              </el-select>
            </div>
            <div class="hor ver-center flex1 pd-tb10">
              <div style="width: 80px;" class="font14 font-text-color-main-title ">备注</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 160px"
                        type="textarea" maxlength="5120" :autosize="{minRows: 4, }" placeholder="请输入"
                        v-model="basisDemand.remarks">
              </el-input>
            </div>
          </div>
          <div class="hor match-width ver-center hor-center mg-t-20">
            <el-button @click="infoDialogShow = false">取 消</el-button>
            <el-button type="primary" slot="reference" :loading="onSaveLoading" class="mg-l-10"
                       @click="onClickSave">保存
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
const request = require('@/api/comprehensive/basisDemand')

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      allList: null,
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      infoDialogShow: false,
      selectRowList: [],
      onDeleteLoading: false,
      onDeleteShow: false,
      onDeleteId: "",
      onSaveLoading: false,
      listLoading: false,
      basisDemand: {
        id: null,
        project: {},
        demandDetails: {
          id:null,
        }
      }
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
  },
  mounted() {
    this.fetchData()
  },
  created() {

  },
  methods: {
    fetchData() {
      this.listLoading = true
      const data = new FormData()
      for (var key in this.params) {//直接去除掉空值的对象
        if (this.isEmpty(this.params[key])) {
          delete this.params[key]
        }
      }
      data.append('params', JSON.stringify(this.params))
      data.append('page', this.page)
      data.append('size', this.size)

      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      request.getYongXuList(data).then(response => {
        this.allList = response.data
        this.total = response.totalElements

        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    },
    handleSelectionChange(rowList) {//多选变化监听
      this.selectRowList = rowList
    },
    onCellClick(row, column, cell, event) {
      if (column.type == 'selection') {
        this.$refs.table.toggleRowSelection(row)
      }
    },
    onItemClick(row) {//单行点击
    },
    onItemDoubleClick(row) {//单行双击
      this.onClickView(row)
    },

    onClickSave() {//点击保存
      // if (this.basisDemand.name == null || this.basisDemand.name === "") {
      //   this.$message({
      //     message: '名称不能为空',
      //     type: 'warning',
      //     duration: 2000
      //   })
      //   return
      // }
      this.requestSave()
    },
    onClickView(row) {
      if (row.demandDetails.jieDuan == null || row.demandDetails.jieDuan == 0 || row.demandDetails.jieDuan == "" || row.demandDetails.jieDuan == undefined){
        this.$message({
          message: '该项目未上传清单，不允许编辑',
          type: 'warning',
          duration: 2000
        })
        return
      }
      if (row.demandDetails.jieDuan == 6 && row.demandDetails.supplyCompany == null){
        this.$message({
          message: '该项目尚未确定唯一供应商，不允许编辑',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.basisDemand = JSON.parse(JSON.stringify(row))
      this.infoDialogShow = true
    },
    requestSave() {
      this.onSaveLoading = true
      //把选择的权限赋值过去
      const data = new FormData()
      data.append('json', JSON.stringify(this.basisDemand));
      request.saveByJson(data).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },

  }
}
</script>
<style>

</style>
